<template>
	<view class="container" >
		<view class="backBox">
			<view class="iconBox" @click="back">
				<image src="../../static/mine_1.png"></image>
				<text>订单详情</text>
			</view>
		</view>
		<view style="padding: 10px;margin-top: -40px;">
			<view style="padding-bottom: 30px;" >
				<view class="bg-white">
					<view class="section">
						<!-- store info begin -->
						<list-cell :hover="false">
							<view class="w-100 d-flex align-items-center">
								<view class="d-flex flex-column w-100">
									<view class="w-100 font-size-lg text-color-base text-truncate mb-10" style="font-size: 18px;font-weight: bold;">{{ order.shopName }}</view>
									<view class="w-100 d-flex align-items-center overflow-hidden">
										<image src="../../static/images/address.png" class="flex-shrink-0" style="width: 30rpx; height: 30rpx;"></image>
										<view class="text-truncate font-size-sm text-color-assist">{{ order.shopAddress }}</view>
									</view>
								</view>
								
							</view>
						</list-cell>
						<!-- store info end -->
						<!-- goods begin -->
						<list-cell :hover="false" padding="50rpx 30rpx">
							<view class="w-100 d-flex flex-column position-relative" style="margin-bottom: -40rpx;">
								<view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in order.foodOrderDetailList" :key="index">
									<view class="d-flex flex-column w-60 overflow-hidden">
										<view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.foodName }}</view>
										<view class="font-size-sm text-color-assist text-truncate">{{ good.foodUnit }} {{ good.remark }}</view>
									</view>
									<view class="d-flex w-40 align-items-center justify-content-between pl-30">
										<view class="font-size-base text-color-base">x{{ good.foodNumber }}</view>
										<view class="font-size-base text-color-base font-weight-bold">￥{{ good.foodPrice }}</view>
									</view>
								</view>
							</view>
						</list-cell>
						<!-- goods end -->
					</view>
					<view class="section">
						<!-- payment and amount begin -->
						<list-cell :hover="false" padding="50rpx 30rpx">
							<view class="w-100 d-flex flex-column">
								<view class="pay-cell">
									<view>支付方式</view>
									<view class="font-weight-bold">{{ type[order.payType] }}</view>
								</view>
								<view class="pay-cell">
									<view>打包费</view>
									<view class="font-weight-bold">￥{{ order.takeoutPackingFee }}</view>
								</view>
								<view class="pay-cell">
									<view>配送费</view>
									<view class="font-weight-bold">￥{{ order.deliverFee }}</view>
								</view>
								<view class="pay-cell">
									<view>金额总计</view>
									<view class="font-weight-bold">￥{{ order.orderAmount }}</view>
								</view>
								<view class="pay-cell" v-if="order.payType<2">
									<view>福币抵扣</view>
									<view class="font-weight-bold price-base">{{ order.fbPayAmount }}</view>
								</view>
								<view class="pay-cell" v-if="order.payType == 1">
									<view>微信支付</view>
									<view class="font-weight-bold price-base">{{ order.wxPayAmount }}</view>
								</view>
							</view>
						</list-cell>
						<!-- payment and amount end -->
					</view>
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column">
							
							
							<view class="pay-cell">
								<view>下单时间</view>
								<view class="font-weight-bold">{{ order.createTime}}</view>
							</view>
							<view class="pay-cell">
								<view>下单门店</view>
								<view class="font-weight-bold">{{ order.shopName }}</view>
							</view>
							<view class="pay-cell">
								<view>订单号</view>
								<view class="font-weight-bold">{{ order.orderId }}</view>
							</view>
							<view class="pay-cell">
								<view>收货人</view>
								<view class="font-weight-bold">{{ order.receiverName }}</view>
							</view>
							<view class="pay-cell">
								<view>收货电话</view>
								<view class="font-weight-bold">{{ order.phone }}</view>
							</view>
							<view class="pay-cell" style="align-items: flex-start;">
								<view >收货地址</view>
								<view class="font-weight-bold" style="width: calc(100% - 80px);text-align: right;">{{ order.address}}</view>
							</view>
						</view>
					</list-cell>
					
				</view>
				<view class="position-relative w-100">
					<image src="/static/images/order/bottom.png" mode="widthFix" class="w-100"></image>
				</view>
				
			</view>
		</view>
		
		<view class="btnBox" v-if="order.status == 0">
			<view class="btn btnCan" @click="cancel()">取消订单</view>
			<view class="btn btnPay" @click="toPay()">立即支付</view>
		</view>
		<view class="btnBox" v-if="order.status == 1">
			<view class="btn btnCan" @click="refund()">申请退款</view>
		</view>
		<view style="height: 10px;width: 100%;"></view>
	</view>
</template>

<script>
import listCell from '@/components/list-cell/list-cell';

export default {
	components: {
		listCell
	},
	data() {
		return {
			order: {},
			orderId:'',
			type:[
				'福币支付','混合支付','微信支付'
			]
		};
	},
	onLoad(e) {
		this.orderId = e.id
		this.getData(e.id)
		this.$wxHide()
	},
	methods: {
		back(){
			uni.navigateBack()
		},
		//加载订单详情
		getData(id){
			var that = this;
			that.uni_request({
				url: '/api/order/detail/' + id,
				method: 'POST',
				success: (res) => {
					if (res.data.code == 0 || res.data.code == 200) {
						that.order = res.data.data
					} else {
						that.nullInfo = true
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1000);
					}
				},
				fail(e){
					uni.hideLoading()
				},
			})
		},
		//跳转支付
		toPay(){
			uni.navigateTo({
				url: '/pages/pay/orderPay?id='+this.orderId
			})
		},
		
		//退款
		refund(){
			var that = this;
			uni.showModal({
				content: '是否确认申请退款？',
				confirmColor:'#8d4a32',
				success: res => {
					if(res.confirm) {
						uni.showLoading({
							title:'提交中'
						})
						that.uni_request({
							url: '/api/order/refund/' + that.orderId ,
							method: 'POST',
							success: (res) => {
								uni.hideLoading()
								if (res.data.code == 0 || res.data.code == 200) {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
									setTimeout(function() {
										uni.switchTab({
											url:'/pages/take-foods/take-foods'
										})
									}, 1000);
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
								}
							},
							fail(e){
								uni.hideLoading()
							},
						})
					}
				}
			})
			
		},
		
		//取消订单
		cancel(){
			var that = this;
			uni.showModal({
				content: '确认取消订单？',
				confirmColor:'#8d4a32',
				success: res => {
					if(res.confirm) {
						uni.showLoading({
							title:'取消中'
						})
						that.uni_request({
							url: '/api/order/cancel/' + that.orderId ,
							method: 'POST',
							success: (res) => {
								uni.hideLoading()
								if (res.data.code == 0 || res.data.code == 200) {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
									setTimeout(function() {
										uni.switchTab({
											url:'/pages/take-foods/take-foods'
										})
									}, 1000);
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
								}
							},
							fail(e){
								uni.hideLoading()
							},
						})
					}
				}
			})
			
		},
		
		
		review() {
			const date = this.order.completed_time.split(' ')[0]
			uni.navigateTo({
				url: '/pages/review/review?storename=' + this.order.store.name + '&typeCate=' + this.order.typeCate + '&date=' + date
			})
		},
		goToInvoice() {
			uni.navigateTo({
				url: '/pages/invoice/invoice'
			})
		}
	},
	filters: {
		// 时间戳处理
		formatDate: function(value, spe = '.', k = ' ', mh = ':') {
			let data = new Date(value);
			let year = data.getFullYear();
			let month = data.getMonth() + 1;
			let day = data.getDate();
			let h = data.getHours();
			let mm = data.getMinutes();
			let s = data.getSeconds();
			month = month > 9 ? month : "0" + month;
			day = day > 9 ? day : "0" + day;
			h = h > 9 ? h : "0" + h;
			mm = mm > 9 ? mm : "0" + mm;
			s = s > 9 ? s : "0" + s;
			return `${year}${spe}${month}${spe}${day}${k}${h}${mh}${mm}${mh}${s}`;
		},
	
	
	}
};
</script>

<style lang="scss" scoped>
@mixin arch {
	content: "";
	position: absolute;
	background: rgba(245, 242, 240, 1) !important;
	width: 30rpx;
	height: 30rpx;
	bottom: -15rpx;
	z-index: 10;
	border-radius: 100%;
}
.backBox{
	width: 100vw;
	height: 90px;
	background: $base;
	.iconBox{
		height: 60px;
		@extend %flex-align-center;padding: 0 10px;
		font-size: 17px;color: #fff;letter-spacing: 1px;font-weight: bold;
		image{
			width: 20px;height: 20px;margin-right: 8px;margin-top: 1px;
		}
	}
	
}

.btnBox{
	height: 50px;
	background: #fff;
	width: 100vw;box-shadow: 0 0 5px rgba(0,0,0,0.15);
	position: fixed;bottom: 0;left: 0;
	justify-content: flex-end;
	align-items: center;display: flex;
	.btn{
		width: 100px;font-size: 15px;border-radius: 20px;text-align: center;
		padding: 8px 0;margin-right: 10px;
	}
	.btnPay{
		background: $base; color: #fff;letter-spacing: 1px;border: 1px solid $base;
	}
	.btnCan{
		color: $base;letter-spacing: 1px;border: 1px solid $base;
	}
}

.section {
	position: relative;
	
	&::before {
		@include arch;
		left: -15rpx;
	}
	
	&::after {
		@include arch;
		right: -15rpx;
	}
}

.pay-cell {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: $font-size-base;
	color: $text-color-base;
	margin-bottom: 40rpx;

	&:nth-last-child(1) {
		margin-bottom: 0;
	}
}

.price-base{
	color: $base;
}

.invote-box {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	
	image {
		width: 30rpx;
		height: 30rpx;
	}
}

.btn-box {
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	z-index: 11;
	
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 10rpx;
		flex: 1;
		flex-shrink: 0;
		
		button {
			width: 100%;
			border-radius: 50rem !important;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
		}
	}
}
</style>
